<div>
  <ul id="template-tabs">
    <li class="nav-item">
      <a data-i18n="address.tab.home" class="nav-link active" data-toggle="tab" href="#sieve-widget-addresstest" role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="address.tab.advanced" class="nav-link" data-toggle="tab" href="#sieve-widget-advanced" role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="address.tab.help" class="nav-link" data-toggle="tab" href="#sieve-widget-help" role="tab"></a>
    </li>
  </ul>

  <div id="template-content">
    <div class="tab-content m-2">
      <div class="tab-pane fade show active" id="sieve-widget-addresstest" role="tabpanel">
        <div class="mb-3">
          <h5 data-i18n="address.headers"></h5>

          <div id="sivAddressHeaderList"
               data-list-dropdown="#sivAddressHeaderListTemplate">
         </div>

          <div id="sivAddressHeaderListTemplate" class="d-none">
            <div class="dropdown-menu dropdown-menu-right">
              <button class="dropdown-item" type="button">To</button>
              <button class="dropdown-item" type="button">From</button>
              <button class="dropdown-item" type="button">Cc</button>
              <button class="dropdown-item" type="button">Bcc</button>
              <button class="dropdown-item" type="button">Reply-To</button>
            </div>
          </div>

          <br />
          <div id="sivAddressMatchTypes"> </div>
          <br />
          <div id="sivAddressAddressPart"> </div>
          <br />

          <h5 data-i18n="address.keywords"></h5>
          <div id="sivAddressKeyList">
          </div>

        </div>
      </div>
      <div class="tab-pane fade" id="sieve-widget-advanced" role="tabpanel">
        <div id="sivAddressComparator"> </div>
      </div>
      <div data-i18n="address.help" class="tab-pane fade form-text" id="sieve-widget-help" role="tabpanel" style="white-space: pre-line">
      </div>
    </div>
  </div>
</div>